<template>
	<view class="cate">
		<tpf-nav-bar status-bar hasCenter :fixedHeight="navBar.fixedHeight" :navBarStyle="navBar.navBarStyle" :left="navBar.left" :right="navBar.right" @getNavBarMaxHeight="getNavBarHeight" @iconTap="navBarIconTap">
			<view class="nav-bar-bg"></view>
			<view class="nav-bar-search-input" slot="center">
				<tpl-search-input ref="tplSearchInput" :leftIcon="navBar.searchInput.leftIcon" :rightIcon="navBar.searchInput.rightIcon" @input="input" @searchInputRightIconTap="navBarSearchInputRightIconTap"></tpl-search-input>
			</view>
		</tpf-nav-bar>
		
		<view class="page-content">
			<tpf-tab-bar-vertical ref="scrollview" class="nav-left tab-bar" :height="pageContentHeight + 'px'">
				<tpf-tab-bar-vertical-item v-for="(item,index) of cateList" :key="index" height="100rpx">
					<view class="tab-bar-name-common" :class="currentIndex === index ? 'selected-tab-bar-name' : 'tab-bar-name'" @tap="tabBarItemTap(index)">
						<text :class="currentIndex === index ? 'selected-tab-bar-name-text' : 'tab-bar-name-text'">{{item.name}}</text>
					</view>
				</tpf-tab-bar-vertical-item>
			</tpf-tab-bar-vertical>
			
			<scroll-view class="cate-content-scroll" scroll-y :scroll-top="scrollTop" @scroll="scrollMain" :style="{height: pageContentHeight + 'px'}" scroll-with-animation>
				<view class="cate-card" v-for="(cateCard, cateCardIndex) of cateList" :key="cateCardIndex">
					<view>
						<text class="cate-card-title">{{cateCard.name}}</text>
					</view>
					<uni-grid :column="3" :square="false" :showBorder="false" :highlight="false">
						<block v-for="(cate, cateIndex) of cateCard.children" :key="cateIndex">
							<uni-grid-item>
								<navigator>
									
								</navigator>
								<navigator class="cate-card-item"  :url="'/pages/shop/product/product-list?cateid='+cate.id">
									<image class="cate-card-item-image" :src="cate.ico"></image>
									<text class="cate-card-item-name">{{cate.name}}</text>
								</navigator>
							</uni-grid-item>
						</block>
					</uni-grid>
					
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import config from '@/mixins/home/cate/cate.js';
	import data from '@/data/home/cate/cate.js';
	
	export default {
		mixins: [config],
		inject: ['homeTabBar'],
		data() {
			return {
				navBarHeight: 0,
				currentIndex: 0,
				cateList: [],
				scrollLeftTop:0,
				scrollTop:0,
				arr:[0],
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
			};
		},
		created() {
			const cateList = data.cateList();
			this.cateList = cateList;
		},
		mounted() {
			this.$nextTick(async function () {
				
			})
		},
		methods: {
			getNavBarHeight(e) {
				this.navBarHeight = e;
			},
			navBarIconTap(e) {
				const action = {
					scan() {
						console.log('点击了扫描按钮');
					},
					message() {
						console.log('点击了消息按钮');
					}
				}
				
				action[e]();
			},
			navBarSearchInputRightIconTap(e) {
				this.$refs.tplSearchInput.setSearchInputValue("");
				this.navBar.searchInput.rightIcon.text = "";
			},
			tabBarItemTap(index) {
				this.arr.length==1 && this.getCartHeightList()
				this.currentIndex = index;
				this.scrollTop =this.scrollTop == this.arr[index] ? this.scrollTop+1 : this.arr[index]	//防止两次相等造成点击不触发滚动时间
			},
			getCartHeightList(){
				let that = this;
				let selectorQuery=uni.createSelectorQuery().in(this);
				selectorQuery.select(".tab-bar-item").fields({size: true});
				selectorQuery.exec(data => {
					that.diff =  data[0].height*that.cateList.length - (that.homeTabBar.pageContentHeight - that.navBarHeight);
				});
				selectorQuery.selectAll('.cate-card').boundingClientRect(function(rects) {
					let top=0;
					rects.forEach(function(rect){
						top += rect.height;
						that.arr.push(top)
					})
				}).exec();
			},
			scrollMain(e) {
				this.arr.length==1 && this.getCartHeightList()
				
				let that = this
				if(this.timeoutId){
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function(){
					that.scrollHeight = e.detail.scrollTop + 1 + (that.homeTabBar.pageContentHeight - that.navBarHeight)/2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 (that.homeTabBar.pageContentHeight - that.navBarHeight)/2
					for (let i = 0; i < that.arr.length;i++) {
						let heightOld = that.arr[i];
						let heightNew = that.arr[i+1];
						if (!heightNew || (that.scrollHeight >= heightOld && that.scrollHeight < heightNew)) {
							that.currentIndex = i;
							(that.diff>0) && (that.$refs.scrollview.scrollTop = Math.round((that.currentIndex * that.diff)/(that.cateList.length-1)));
							return false;
						}
					}
					that.currentIndex = 0;
					that.timeoutId = undefined;
				}, 10)
			},
			input(e){
				this.navBar.searchInput.rightIcon.text = e.detail.value.length==0?"":this.navBar.searchInput.deleteIcon.text;
			}
		},
		computed: {
			pageContentHeight() {
				// console.log( this.homeTabBar.pageContentHeight , this.navBarHeight);
				return this.homeTabBar.pageContentHeight - this.navBarHeight;
			}
		},
	}
</script>

<style lang="scss">
	
	.nav-bar-bg {
		background-color: $uni-bg-color;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}
	.nav-bar-search-input {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
	}
	
	.cate {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}
	
	.page-content {
		position: relative;
		flex: 1;
		// border-width: 3px;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	
	
	.tab-bar {
		// border-width: 3px;
		// border-color: red;
		width: 200rpx;
	}
	.tab-bar-name-common {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 200rpx;
		
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.tab-bar-name {
		color: $uni-text-color-grey;
	}
	.selected-tab-bar-name {
		background-color: $uni-bg-color;
	}
	.tab-bar-name-text {
		font-size: $uni-font-size-base;
	}
	.selected-tab-bar-name-text {
		font-size: $uni-font-size-lg;
		font-weight: bold;
	}
	
	
	.cate-content-scroll {
		overflow: hidden;
		background-color: $uni-bg-color;
		flex: 1;
	}
	.cate-card {
		margin-top: $uni-spacing-row-mi;
		margin-left: $uni-spacing-col-base;
		margin-right: $uni-spacing-col-sm;
		box-shadow: -1px 0px 3px 0px #EEEEEE;
	}
	.cate-card-title {
		font-size: $uni-font-size-sm;
		font-weight: bold;
		padding: $uni-spacing-col-base;
		display: block;
	}
	.cate-card-item {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.cate-card-item-image {
		width: $uni-img-size-base;
		height: $uni-img-size-base;
	}
	.cate-card-item-name {
		font-size: $uni-font-size-mi;
		margin-top: $uni-spacing-row-base;
		margin-bottom: $uni-spacing-row-base;
	}
</style>
